import React, { Component } from 'react'
import {
  Form,
  Input,
  Select
} from 'antd'
import PropTypes from 'prop-types'

/**
 * 添加分类组件
 */

const Item = Form.Item
const Option = Select.Option

class UserForm extends Component {
  props: any
  
  static propTypes = {
    setForm: PropTypes.func.isRequired,
    roles: PropTypes.array.isRequired,
    user: PropTypes.object,
  }

  UNSAFE_componentWillMount() {
    this.props.setForm(this.props.form)
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const {roles,user} = this.props
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 16 },
    }
    return (
      <Form {...formItemLayout}>
        <Item label='用户名'>
          {
            getFieldDecorator('username', {
              initialValue: user.username,
            })(
              <Input placeholder="请输入用户名"></Input>
            )
          }
          </Item>
          {
            user._id ? null : (
              <Item label='密码'>
                {
                  getFieldDecorator('password', {
                    initialValue: user.password,
                  })(
                    <Input type='password' placeholder="请输入密码"></Input>
                  )
                }
              </Item>
            )
          }
          
          <Item label='手机号'>
          {
            getFieldDecorator('phone', {
              initialValue: user.phone,
            })(
              <Input placeholder="请输入手机号"></Input>
            )
          }
          </Item>
          <Item label='邮箱'>
          {
            getFieldDecorator('email', {
              initialValue: user.email,
            })(
              <Input placeholder="请输入邮箱"></Input>
            )
          }
          </Item>
          <Item label='角色'>
          {
            getFieldDecorator('role_id', {
              initialValue: user.role_id,
            })(
              <Select>
                {
                  roles.map(role => <Option key={role._id} value={role._id}>{role.name}</Option>)
                }
              </Select>
            )
          }
          </Item>
      </Form>
    )
  }
}

export default Form.create()(UserForm)
